<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
    <div>
        <h1 class="hello">hello</h1>
        <article>
            <h1>A heading</h1>
            <p>
                Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion
                daikon amaranth tatsoi tomatillo melon azuki bean garlic.
            </p>

            <p>
                Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette
                tatsoi pea sprouts fava bean collard greens dandelion okra wakame tomato.
                Dandelion cucumber earthnut pea peanut soko zucchini.
            </p>
        </article>
    </div>

    <div class="box">
        <div>
            <p>
                Veggies.
            </p>
        </div>
    </div>

    <div class="box1">
        <div>
            <p>
                Veggies.
            </p>
        </div>
    </div>

</body>
</html>

<style>
    .hello {
        color: red;
    }

    body {
        font-family: sans-serif;
    }

    h1 ~ p {
        font-weight: bold;
        background-color: #333;
        color: #fff;
        padding: 0.5em;
    }

    .box {

        width: 350px;
        height: 150px;
        margin-left: 50px;
        margin-top: 30px;
        padding: 25px;
        border: 5px solid black;
    }

    .box1 {
        width: 350px;
        inline-size: 350px;
        height: 150px;
        block-size: 100px;
        margin: 10px;
        padding: 25px;
        border: 5px solid black;
    }
</style>